<template>
    <div class="course-tab">
        <div class="tab-col first-col">
            <div class="label-row">
                <p class="date">日期</p>
                <span class="line"></span>
                <p class="time">时间段</p>
            </div>
            <div class="label-item" v-for="time in timeList" :key="time.id">
                {{time.timeStart + '-' + time.timeEnd}}
            </div>
        </div>
        <div class="tab-col" v-for="(item, i) in courseList" :key="i">
            <div class="label-row">
                <p>{{item.week}}</p>
                <p>{{item.date}}</p>
            </div>
            <div class="label-item" v-for="(course, index) in item.courseList" :key="index">
                <span  v-if="!course.courseNodeId"></span>
                <span class="selected" v-else-if="course.courseNodeId && course.courseNodeStatus">已约</span>
                <span class="can-selected" v-else-if="!course.selected" @tap="handelTap(course)">预约</span>
                <span class="selected" v-else-if="course.selected" @tap="handelTap(course)">已选</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        timeList: Array,
        courseList: Array
    },
    name: 'CourseTab',
    methods: {
        handelTap (course) {
            this.$emit('handelTap', course)
        }
    },
}
</script>

<style lang="stylus" scoped>
.course-tab
    display flex
    width 347px
    margin 10px auto
    box-sizing border-box
    border-radius: 4px;
    box-shadow: 1px 2px 4px 0 rgba(186, 189, 201, 0.4);
    background-color: #ffffff;
    line-height 35px
    text-align center
    font-size: 14px;
    color #3c4d6b
    .tab-col
        flex-grow 1
        display flex
        flex-direction column
        border-left 1px solid #e6e6e6
        >div
            border-bottom 1px solid #e6e6e6
            &:last-child
                border-bottom 0px solid #e6e6e6   
        .label-item
            >span 
                display block
                height 35px    
            .can-selected
                font-size #e6e6e6
            .selected
                background-color: #f3f4f9;  
                color #7196ef     
        .label-row
            padding 8px 0px 4px
            line-height 20px
            .date
                padding-right 15px
                text-align right 
            .time
                padding-left 15px
                text-align left
            .line
                display block
                height 1px
                width 80%
                margin-left 10%
                background  #e6e6e6 
                transform rotate(15deg)   
    .tab-col.first-col
        flex-grow 0
        width 103px
        max-width 103px
        position relative
        top -1px
</style>
